<template>
  <div>
    <el-dialog
        destroy-on-close
        v-model="visible"
        :title="title"
        width="30%"
        :close-on-click-modal="false"
        :before-close="handleClose"
        class="school-operate-dialog"
    >
        <div  v-loading="loading">
          <div class="input-label">{{ $t('loc.center') }}</div>
          <el-input v-model="data.name" :placeholder="$t('loc.center')"></el-input>
          <div class="input-label">{{ $t('loc.shdRepTm') }}</div>
          <div class="send-report-option">
            <el-select v-model="data.sendReportHour">
              <el-option
                  v-for="item in sendReportHourOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            :
            <el-select v-model="data.sendReportMinute">
              <el-option
                  v-for="item in sendReportMinuteOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            PM
          </div>
        </div>
      <template #footer>
      <span class="dialog-footer" :class="{'flex-align-justify' : operateType === 'edit'}">
          <el-button v-show="operateType === 'edit'" type="danger" @click="deleteHandler">删除</el-button>
        <div>
          <el-button @click="handleClose">{{ $t('loc.cancel') }}</el-button>
          <el-button type="primary" @click="saveHandler">
             {{ $t('loc.save') }}
          </el-button>
        </div>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import SchoolApi from "@/api/school";
export default {
  name: "SchoolOperateDialog",
  props: ['dialogVisible', 'schoolId', 'operateType'], //edit add
  data() {
    return {
      loading: false,
      visible: false,
      title: '编辑幼儿园', // 添加一个新幼儿园
      data: {
        sendReportHour: '00',
        sendReportMinute: '00',
      },
      sendReportHourOptions: [
        {value: '', label: ''},
        {value: '00', label: '00'},
        {value: '01', label: '01'},
        {value: '02', label: '02'},
        {value: '03', label: '03'},
        {value: '04', label: '04'},
        {value: '05', label: '05'},
        {value: '06', label: '06'},
        {value: '07', label: '07'},
        {value: '08', label: '08'},
      ],
      sendReportMinuteOptions: [
        {value: '', label: ''},
        {value: '00', label: '00'},
        {value: '30', label: '30'},
      ],
      needReLoadData: false,
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(newVal) {
        this.visible = newVal
        if (newVal) {
          this.initData()
        }
      },
    },
    operateType: {
      immediate: true,
      handler(newVal) {
        if (newVal === 'edit') {
          this.title = this.$t('loc.editCenter')
        } else if (newVal === 'add'){
          this.data = {}
          this.title = this.$t('loc.CtNwCenter')
        }
      },
    },
    schoolId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {

        }
      },
    },
  },
  methods: {
    initData () {
      this.data = {}
      this.data.sendReportHour = ''
      this.data.sendReportMinute = ''
      this.loadSchoolDetail(this.schoolId)
    },
    handleClose () {
      this.visible = false
      this.$emit('update:dialogVisible',  this.visible)
      if (this.needReLoadData === true) {
        this.needReLoadData = false
        this.$emit('needReLoadData')
      }
    },
    loadSchoolDetail (schoolId) {
      if (!schoolId) {
        return
      }
      this.loading = true
      SchoolApi.getSchool(schoolId).then(res => {
        this.data = res
        this.data.sendReportHour = res.sendReportTime &&  res.sendReportTime.split(':')[0] || '00'
        this.data.sendReportMinute = res.sendReportTime &&  res.sendReportTime.split(':')[1] || '00'
        this.loading = false
      }).catch((error) => {
        this.$message.error(error.response.data.description)
        this.loading = false
      })
    },
    deleteHandler () {
      this.$confirm('确认删除该幼儿园吗？', this.$t('loc.tip'), {
        confirmButtonText: this.$t('loc.done'),
        cancelButtonText: this.$t('loc.cancel'),
        type: 'warning',
      }).then(() => {
        SchoolApi.deleteSchool(this.data.id).then(() => {
          this.needReLoadData = true
          this.handleClose()
        })
      }).catch(() => {
      });
    },
    saveHandler () {
      if (!this.checkData()) {
        return
      }
      // 收集数据
      let params = {
        name: this.data.name.trim(),
        sendReportTime: this.data.sendReportHour + ':' + this.data.sendReportMinute,
      }
      if (this.data.sendReportHour === '' || this.data.sendReportMinute === '') {
        params.sendReportTime = ''
      }
      if (this.operateType === 'add') {
        SchoolApi.createSchool(params).then(() => {
          this.needReLoadData = true
          this.handleClose()
        })
      }
      if (this.operateType === 'edit') {
        // 收集数据
        params.id = this.data.id
        SchoolApi.updateSchool(params).then(() => {
          this.needReLoadData = true
          this.handleClose()
        })
      }
    },
    checkData () {
      if (!this.data.name || this.data.name.trim() === '') {
        this.$message.error('幼儿园名称不能为空')
        return false
      }
      return true
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__footer {
  border-top: 1px solid #e5e5e5;
  padding: 20px;
}

/deep/ .el-dialog {
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 6px;
  .el-dialog__header {
    border-bottom: 1px solid #e5e5e5;
    .el-dialog__title {
      font-size: 24px;
      color: #58666e;
    }
  }
}
.school-operate-dialog /deep/{
  .input-label {
    margin-top: 10px;
    margin-bottom: 5px;
    color: #323338!important;
    font-size: 16px!important;
    font-weight: 400;
  }

  .send-report-option {
    /deep/ .el-select .el-input {
      display: flex;
      width: 100px;
    }
  }
}
</style>
